<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>基本资料</title>
    <link rel="stylesheet" href="./css/app.css">
    <link rel="stylesheet" href="../font/ionicons-2.0.1/css/ionicons.min.css">
    <link rel="stylesheet" href="../tools/multisSelect/bootstrap-multiselect.css">
</head>
<body>
<div class="baseinfo-body taget-profession">
    <div class="to" style="">
        <!--加载公共的样式-->
        @@include('./include/top.html')
        <!--栅格系统第二行开始-->
        <div class="row top2">
            <div class="col-md-2 ul">
                <p style="color:red">个人资料</p>
            </div>
            <div class="col-md-2 ul">
                <p>修改密码</p>
            </div>
            <div class="col-md-2 ul">
                <p>认证信息</p>
            </div>
            <div class="col-md-2 col-md-offset-4 ul">
                <div class="you">
                    <span>预览个人主页</span>
                </div>
            </div>
        </div>
        <!--栅格系统第二行结束-->
        <!--修改类型开始-->
        <div class="row top3">
            <ul>
                <li>
                    <a href="" style="color:#fe4343">
                        <i class="icon ion-ios-paper-outline"></i>
                        <p>基本资料</p>
                    </a>
                </li>
                <li>
                    <a href="">
                        <i class="icon ion-ios-person-outline"></i>
                        <p>修改头像</p>
                    </a>
                </li>
                <li>
                    <a href="">
                        <i class="icon ion-social-buffer-outline"></i>
                        <p>教育经历</p>
                    </a>
                </li>
                <li>
                    <a href="">
                        <i class="icon ion-ios-photos-outline"></i>
                        <p>工作经历</p>
                    </a>
                </li>
                <li>
                    <a href="">
                        <i class="icon ion-ios-pricetags-outline"></i>
                        <p>我的标签</p>
                    </a>
                </li>
                <li>
                    <a href="">
                        <i class="icon ion-ios-pie-outline"></i>
                        <p>工作经历</p>
                    </a>
                </li>
                <li>
                    <a href="">
                        <i class="icon ion-ios-infinite-outline"></i>
                        <p>账号绑定</p>
                    </a>
                </li>
            </ul>
        </div>
        <!--修改类型结束-->
        <!--资料的完成度开始-->
        <div class="row top4">
            <div class="col-md-12 ul">
                <span>您的个人信息完整度为</span><span style="color:red;">86%</span>,<span>完整度达到100%后方可报名任务。</span>
            </div>
        </div>
        <!--资料的完成度结束-->

        <!--填写信息开始-->
        <div class="row top5">
            <div class="profession_type">
                <nav class="profession_title col-md-12">
                    <h4 class="title-item1">职业技能</h4>
                    <p class="title-item2">记录最擅长的职业技能(3个以内)</p>
                    <div class="title-item3">显示专业: 室内 <a href="">换一个专业</a></div>
                </nav>
                <ul class="profession-label">
                    <li class="label-item">
                        asdfasdfasdf
                        <i class="ion ion-close"></i>
                    </li>
                    <li class="label-item">
                        asdfasdfasdf
                        <i class="ion ion-close"></i>
                    </li>
                    <li class="label-item">
                        真是没辙了啊
                        <i class="ion ion-close"></i>
                    </li>
                </ul>
                <div class="col-md-4 profession-select">
                    <select id="example-getting-started" class="form-control">
                        <option value="cheese">Cheese</option>
                        <option value="tomatoes">Tomatoes</option>
                        <option value="mozarella">Mozzarella</option>
                        <option value="mushrooms">Mushrooms</option>
                        <option value="pepperoni">Pepperoni</option>
                        <option value="onions">Onions</option>
                    </select>
                </div>
            </div>
            <div class="profession_type">
                <nav class="profession_title col-md-12">
                    <h4 class="title-item1">任务类型</h4>
                    <p class="title-item2">记录最擅长的职业技能(3个以内)</p>
                </nav>
                <ul class="profession-label">
                    <li class="label-item">
                        真是没辙了啊
                        <i class="ion ion-close role-close-label"></i>
                    </li>
                </ul>
                <div class="col-md-4 profession-select">
                    <select  class="form-control role-select-label">
                        <option value="cheese">Cheese</option>
                        <option value="tomatoes">Tomatoes</option>
                        <option value="mozarella">Mozzarella</option>
                        <option value="mushrooms">Mushrooms</option>
                        <option value="pepperoni">Pepperoni</option>
                        <option value="onions">Onions</option>
                    </select>
                </div>
            </div>
        </div>
        <!--填写信息结束-->





    </div>
</div>
</div>
</body>
<script src="./js/jquery/jquery.js"></script>
<script src="./js/bootstrap/bootstrap.js"></script>
<script src="../tools/Calendar.js"></script>
<script src="./js/app.js"></script>
<script src="../tools/multisSelect/bootstrap-multiselect.js"></script>
<script>
        $('.role-select-label').change(function () {
            var value = $(this).find('option:selected').val();
            var html = '<li class="label-item"> ' +
                            value +
                        ' <i class="ion ion-close role-close-label"></i>' +
                    '</li>'

            $(this).parent().siblings('.profession-label').append(html);

        });
        $(document).on('click', '.role-close-label', function () {
            $(this).parent().remove();
        })

</script>
</html>